<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<!-- 导航页 -->
<div th:fragment="nav" class="navbar navbar-expand-md navbar-light fixed-top bg-light shadow-sm rounded">
    <a class="navbar-brand" href="#">TxBlog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <!-- 此项目固定 -->
            <li th:class="${active} == 0 ?'nav-item active' : 'nav-item'">
                <a class="nav-link" th:href="@{/index}"> <i class="fas fa-home"></i> 首页 <span
                        class="sr-only">(current)</span></a>
            </li>
            <li th:class="${item.id == active} ? 'nav-item active' : 'nav-item'" th:each="item : ${navs}">
                <a class="nav-link" th:href="@{${item.link}(active=${item.id})}">
                    <i th:class="${item.icon}"></i>
                    <span class="ml-1" th:text="${item.name}">NAME</span>
                </a>
            </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0" th:action="@{/index}" method="get">
            <input class="form-control mr-sm-2" name="keywords" type="text" v-model="searchText" placeholder="搜索内容"
                   aria-label="搜索">
            <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </div>
</div>

<!-- 分类标签 -->
<div th:fragment="cat" class="col-md-3 d-none d-md-block">
    <div class="category">
        <h4>文章分类</h4>
        <ul class="list-group list-group-flush">
            <li th:each="item : ${categories}" th:attr="data-href=@{'/category/'+${item.id}}"
                class="list-group-item d-flex justify-content-between align-items-center"
                @click="categoryClick">
                <span th:text="${item.category}" th:attr="data-href=@{'/category/'+${item.id}}">Kotlin</span>
                <span class="badge badge-secondary badge-pill" th:attr="data-href=@{'/category/'+${item.id}}"
                      th:text="${item.posts}">14</span>
            </li>
        </ul>
    </div>
    <div class="tags mt-3">
        <h4>标签列表</h4>
        <div class="groups">
            <a th:each="item : ${tags}" th:href="@{'/tag/' + ${item.id}}"
               class="btn btn-light"
               th:text="${item.name}">Docker</a>
        </div>
    </div>
</div>

<footer th:fragment="footer" class="footer mt-auto py-3">
    <div class="container">
        <span class="text-muted">&copy;2020 TxBlog</span>
    </div>
</footer>